<template>
  <div>
    <el-row :gutter="20">
      <!-- 专利卡片 -->
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6" style="margin-top: 10px;">
        <el-card shadow="hover" class="custom-card">
          <div class="card-content">
            <div class="card-left">
              <div class="card-title"> <i class="el-icon-collection-tag"></i>专利信息</div>
              <div class="stat-label">专利总量</div>
              <div class="stat-value">{{ patentData.all_count }}</div>
              <div class="sub-stat">
                <div class="stat-item">
                  <i class="el-icon-magic-stick"></i>
                  <span class="stat-item-label gray-text">本年度数量</span>
                  <span class="stat-item-value blue-text">{{ patentData.current_count }}</span>
                </div>
                <div class="stat-item" style="margin-left: 40px;">
                  <i class="el-icon-data-line"></i>
                  <span class="stat-item-label gray-text">本年增长率</span>
                  <span class="growth-rate" :class="getGrowthRateClass(patentData.growth_rate)">{{ patentData.growth_rate }}%</span>
                  <i v-if="patentData.growth_rate >= 0" class="el-icon-top growth-up"></i>
                  <i v-if="patentData.growth_rate < 0" class="el-icon-bottom growth-down"></i>
                </div>
              </div>
            </div>
            <div class="card-icon">
              <img src="@/assets/images/pattent.png" alt="辅助图" />
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 软著卡片 -->
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6" style="margin-top: 10px;">
        <el-card shadow="hover" class="custom-card">
          <div class="card-content">
            <div class="card-left">
              <div class="card-title"> <i class="el-icon-collection-tag"></i>软著信息</div>
              <div class="stat-label">软著总量</div>
              <div class="stat-value">{{ copyrightData.all_count }}</div>
              <div class="sub-stat">
                <div class="stat-item">
                  <i class="el-icon-magic-stick"></i>
                  <span class="stat-item-label gray-text">本年度数量</span>
                  <span class="stat-item-value blue-text">{{ copyrightData.current_count }}</span>
                </div>
                <div class="stat-item" style="margin-left: 40px;">
                  <i class="el-icon-data-line"></i>
                  <span class="stat-item-label gray-text">本年增长率</span>
                  <span class="growth-rate" :class="getGrowthRateClass(copyrightData.growth_rate)">{{ copyrightData.growth_rate }}%</span>
                  <i v-if="copyrightData.growth_rate >= 0" class="el-icon-top growth-up"></i>
                  <i v-if="copyrightData.growth_rate < 0" class="el-icon-bottom growth-down"></i>
                </div>
              </div>
            </div>
            <div class="card-icon">
              <img src="@/assets/images/copyright.png" alt="辅助图" />
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 论文卡片 -->
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6" style="margin-top: 10px;">
        <el-card shadow="hover" class="custom-card">
          <div class="card-content">
            <div class="card-left">
              <div class="card-title"> <i class="el-icon-collection-tag"></i>论文信息</div>
              <div class="stat-label">论文总量</div>
              <div class="stat-value">{{ paper.all_count }}</div>
              <div class="sub-stat">
                <div class="stat-item">
                  <i class="el-icon-magic-stick"></i>
                  <span class="stat-item-label gray-text">本年度数量</span>
                  <span class="stat-item-value blue-text">{{ paper.current_count }}</span>
                </div>
                <div class="stat-item" style="margin-left: 40px;">
                  <i class="el-icon-data-line"></i>
                  <span class="stat-item-label gray-text">本年增长率</span>
                  <span class="growth-rate" :class="getGrowthRateClass(paper.growth_rate)">{{ paper.growth_rate }}%</span>
                  <i v-if="paper.growth_rate >= 0" class="el-icon-top growth-up"></i>
                  <i v-if="paper.growth_rate < 0" class="el-icon-bottom growth-down"></i>
                </div>
              </div>
            </div>
            <div class="card-icon">
              <img src="@/assets/images/paper.png" alt="辅助图" />
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 标准卡片 -->
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6" style="margin-top: 10px;">
        <el-card shadow="hover" class="custom-card">
          <div class="card-content">
            <div class="card-left">
              <div class="card-title"> <i class="el-icon-collection-tag"></i>标准信息</div>
              <div class="stat-label">标准总量</div>
              <div class="stat-value">{{ standard.all_count }}</div>
              <div class="sub-stat">
                <div class="stat-item">
                  <i class="el-icon-magic-stick"></i>
                  <span class="stat-item-label gray-text">本年度数量</span>
                  <span class="stat-item-value blue-text">{{ standard.current_count }}</span>
                </div>
                <div class="stat-item" style="margin-left: 40px;">
                  <i class="el-icon-data-line"></i>
                  <span class="stat-item-label gray-text">本年增长率</span>
                  <span class="growth-rate" :class="getGrowthRateClass(standard.growth_rate)">{{ standard.growth_rate }}%</span>
                  <i v-if="standard.growth_rate >= 0" class="el-icon-top growth-up" ></i>
                  <i v-if="standard.growth_rate < 0" class="el-icon-bottom growth-down"></i>
                </div>
              </div>
            </div>
            <div class="card-icon">
              <img src="@/assets/images/pattent.png" alt="辅助图" />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getPatentInfoForCard } from "@/api/sci/patent";
import { getSoftwareCopyrightForCard} from "@/api/sci/copyright";
import { getPaperInfoForCard } from "@/api/sci/paper";
import { getStandardInfoForCard } from "@/api/sci/standard";




export default {
  name: "CardInfo",
  components: {},
  data() {
    return {
      growthRate: 60,
      patentData: {
        all_count: 0,
        current_count: 0,
        growth_rate: 0
      },
      copyrightData: {
        all_count: 0,
        current_count: 0,
        growth_rate: 0
      },
      paper: {
        all_count: 0,
        current_count: 0,
        growth_rate: 0
      },
      standard: {
      }
    };
  },
  computed: {

  },
  created() {
    this.fetchAllData();
  },
  mounted() {},
  watch: {},
  methods: {
    getGrowthRateClass(rate) {
      return {
        'green-text': rate < 0,
        'red-text': rate >= 0
      };
    },
     async fetchAllData() {
      try {
        // 获取所有数据
        const [patentRes, copyrightRes, paperRes, standardRes] = await Promise.all([
          getPatentInfoForCard(),
          getSoftwareCopyrightForCard(),
          getPaperInfoForCard(),
          getStandardInfoForCard()
        ]);

        this.patentData = patentRes.data;
        this.copyrightData = copyrightRes.data;
        this.paper = paperRes.data;
        this.standard = standardRes.data;


      } catch (error) {
        console.error("获取数据失败:", error);
        this.$message.error("获取成果数据失败");
      }
    },
  }
};
</script>

<style lang="scss" scoped>

  .custom-card {
    border-radius: 8px;
    border: none;

    ::v-deep .el-card__body {
      padding: 20px;
    }
  }

  .card-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .card-left {
    flex: 1;
  }

   .card-title {
    color: #000000;
    font-size: 22px;
    margin-bottom: 16px;
    font-weight: bold; /* Changed to bold */
    font-family: SimHei, sans-serif; /* Added SimHei font */
    display: flex;
    align-items: center;
    gap: 15px;
  }

  .stat-label {
    font-size: 16px; /* Smaller font size */
    color: #666666; /* Same color as card title */
    margin-bottom: 4px; /* Space between label and value */
  }

  .stat-value {
    font-size: 36px;
    font-weight: bold;
    color: #303133;
    margin-bottom: 15px;
    margin-top: 15px;
  }

  .sub-stat {
    display: flex;
    align-items: center;
    font-size: 14px;
  }

  .stat-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    gap: 2px;
  }

  .stat-item-label {
    color: #999999;
    font-size: 12px;
  }

  .stat-item-value {
    margin-left: 8px;
    color: #2559B2;
    font-size: 16px;
    font-weight: bold;
     /* Blue color for values */
  }

  .growth-rate {
    margin-left: 8px;
    &.green-text {
      color: #00AF3A; /* Green color for negative growth rate */
      font-size: 16px;
      font-weight: bold;
    }
    &.red-text {
      color: #FF5757; /* Red color for positive growth rate */
      font-size: 16px;
      font-weight: bold;
    }
  }

  .card-icon {
    display: flex;
    align-items: flex-end; /* Align items to the bottom */
    height: 50px; /* Ensure the container has height to align items */
    margin-right: 10px;
    margin-top: 100px;
  }



  .growth-down {
    color: #00AF3A;
    font-weight: bold;
  }

  .growth-up {
    color: #FF5757;
    font-weight: bold;
  }

</style>
